<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="description" content="A variety of highly customizable CSS Buttons built with Sass and Compass. The Buttons framework is ready to use and easy to install.">
    <meta name="viewport" content="width=device-width">
    <link href='//fonts.googleapis.com/css?family=Cherry+Swash:400,700' rel='stylesheet' type='text/css'>
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/buttons.css">

    <!--[if lt IE 9]>
        <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <script>window.html5 || document.write('<script src="js/vendor/html5shiv.js"><\/script>')</script>
    <![endif]-->

    <title>Buttons - A CSS button library built with Sass and Compass</title>
</head>
<body id="home">
   <!-- FACEBOOK LIKE BUTTON -->
            <div id="fb-root"></div>
            <script>(function(d, s, id) {
            var js, fjs = d.getElementsByTagName(s)[0];
            if (d.getElementById(id)) return;
            js = d.createElement(s); js.id = id;
            js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=162853010460019";
            fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>


    <nav id="main-nav">
        <ul class="clearfix">
            <li class="home"><a href="#home">B</a></li>
            <li><a href="#flat">Flat</a></li>
            <li><a href="#icons">Icons</a></li>
            <li><a href="#glow">Glow</a></li>
            <li><a href="#rounded">Rounded</a></li>
            <li><a href="#pill">Pill</a></li>
            <li><a href="#square">Square</a></li>
            <li><a href="#circle">Circle</a></li>
            <li><a href="#block">Block</a></li>
            <li><a href="#more">More</a></li>
            <li><a href="#setup">Get Started</a></li>

        </ul>

        <div class="clear"></div>
    </nav>

    <header class="clear">
        <hgroup>
          <h1>Buttons</h1>
          <h2>A CSS button library built with Sass &amp; Compass</h2>
        </hgroup>

        <span class="button-wrap button-download">
            <a class="button button-circle button-flat button-flat-primary glow" href="https://github.com/alexwolfe/Buttons/raw/gh-pages/Buttons.zip">Download</a>
        </span>

        <section class="social-buttons">
            <!-- GITHUB STAR BUTTON -->
            <iframe class="github-btn" src="http://ghbtns.com/github-btn.html?user=alexwolfe&repo=Buttons&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="100px" height="20px"></iframe>

            <!-- GITHUB FORK BUTTON -->
            <iframe class="github-button" src="http://ghbtns.com/github-btn.html?user=alexwolfe&repo=Buttons&type=fork&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="62" height="20"></iframe>

            <!-- TWITTER TWEET BUTTON -->
            <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://alexwolfe.github.io/Buttons/" data-text="Buttons - a customizable CSS button library built with Sass &amp; Compass">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>

            <!-- FACEBOOK LIKE BUTTON -->
            <div class="fb-like" data-href="http://alexwolfe.github.io/Buttons/" data-send="false" data-layout="button_count" data-width="450" data-show-faces="false"></div>
        </section>
    </header>


    <section id="page">

        <!-- ******************************************************************* -->
        <!-- FLAT BUTTONS ***************************************************** -->
        <!-- ******************************************************************* -->

        <section id="flat" class="showcase">
            <hgroup>
                <h3>Flat Buttons</h3>
            </hgroup>

            <section class="gallery">
                <ul>
                    <li><a href="#" class="button button-rounded button-flat">press me</a></li>
                    <li><a href="#" class="button button-rounded button-flat-primary">press me</a>  </li>
                    <li><a href="#" class="button button-rounded button-flat-action">press me</a>   </li>
                    <li><a href="#" class="button button-rounded button-flat-highlight">press me</a></li>
                    <li><a href="#" class="button button-rounded button-flat-caution">press me</a>  </li>
                    <li><a href="#" class="button button-rounded button-flat-royal">press me</a>  </li>
                </ul>
                <ul>
                    <li><a href="#" class="button button-pill button-flat">press me</a></li>
                    <li><a href="#" class="button button-pill button-flat-primary">press me</a>  </li>
                    <li><a href="#" class="button button-pill button-flat-action">press me</a>   </li>
                    <li><a href="#" class="button button-pill button-flat-highlight">press me</a></li>
                    <li><a href="#" class="button button-pill button-flat-caution">press me</a>  </li>
                    <li><a href="#" class="button button-pill button-flat-royal">press me</a>  </li>
                </ul>
                <ul>
                    <li><a href="#" class="button button-flat">press me</a></li>
                    <li><a href="#" class="button button-flat-primary">press me</a>  </li>
                    <li><a href="#" class="button button-flat-action">press me</a>   </li>
                    <li><a href="#" class="button button-flat-highlight">press me</a></li>
                    <li><a href="#" class="button button-flat-caution">press me</a>  </li>
                    <li><a href="#" class="button button-flat-royal">press me</a>  </li>
                </ul>
                <ul>
                    <li><a href="#" class="button button-circle button-flat">press me</a></li>
                    <li><a href="#" class="button button-circle button-flat-primary">press me</a>  </li>
                    <li><a href="#" class="button button-circle button-flat-action">press me</a>   </li>
                    <li><a href="#" class="button button-circle button-flat-highlight">press me</a></li>
                    <li><a href="#" class="button button-circle button-flat-caution">press me</a>  </li>
                    <li><a href="#" class="button button-circle button-flat-royal">press me</a>  </li>
                </ul>
            </section>

            <pre class="prettyprint linenums">
&lt;a href=&quot;#&quot; class=&quot;button button-rounded button-flat-primary&quot;&gt;press me&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;button button-pill button-flat-primary&quot;&gt;press me&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;button button-flat-primary&quot;&gt;press me&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;button button-circle button-flat-primary&quot;&gt;press me&lt;/a&gt;</pre>
        </section>



        <!-- ******************************************************************* -->
        <!-- ICONS BUTTONS *************************************************** -->
        <!-- ******************************************************************* -->

        <section id="icons" class="showcase">
            <hgroup>
                <h3>Icon Buttons <em>(icons provided by <a target="_blank" href="http://fortawesome.github.io/Font-Awesome/">Font Awesome</a>)</em></h3>
            </hgroup>

            <section class="gallery">
                <ul>
                    <li><a href="#" class="button button-rounded button-flat"><i class="fa fa-github"></i> press me</a></li>
                    <li><a href="#" class="button button-rounded button-flat-primary"><i class="fa fa-refresh"></i> press me</a></li>
                    <li><a href="#" class="button button-rounded button-flat-action"><i class="fa fa-cloud"></i> press me</a></li>
                    <li><a href="#" class="button button-rounded button-flat-highlight"><i class="fa fa-camera"></i> press me</a></li>
                    <li><a href="#" class="button button-rounded button-flat-caution"><i class="fa fa-code"></i> press me</a>  </li>
                    <li><a href="#" class="button button-rounded button-flat-royal"><i class="fa fa-download"></i> press me</a></li>
                </ul>
            </section>

            <pre class="prettyprint linenums">
&lt;a href=&quot;#&quot; class=&quot;button button-rounded button-flat&quot;&gt;&lt;i class=&quot;fa fa-github&quot;&gt;&lt;/i&gt; press me&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;button button-rounded button-flat-primary&quot;&gt;&lt;i class=&quot;fa fa-refresh&quot;&gt;&lt;/i&gt; press me&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;button button-rounded button-flat-action&quot;&gt;&lt;i class=&quot;fa fa-cloud&quot;&gt;&lt;/i&gt; press me&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;button button-rounded button-flat-highlight&quot;&gt;&lt;i class=&quot;fa fa-camera&quot;&gt;&lt;/i&gt; press me&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;button button-rounded button-flat-caution&quot;&gt;&lt;i class=&quot;fa fa-code&quot;&gt;&lt;/i&gt; press me&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;button button-rounded button-flat-royal&quot;&gt;&lt;i class=&quot;fa fa-download&quot;&gt;&lt;/i&gt; press me&lt;/a&gt;</pre>
        </section>


        <!-- ******************************************************************* -->
        <!-- GLOW BUTTONS *************************************************** -->
        <!-- ******************************************************************* -->

        <section id="glow" class="showcase">
            <hgroup>
                <h3>Glow Buttons</h3>
            </hgroup>

            <section class="gallery">

                <ul>
                    <li><a href="#" class="button glow button-rounded button-flat">press me</a></li>
                    <li><a href="#" class="button glow button-rounded button-flat-primary">press me</a>  </li>
                    <li><a href="#" class="button glow button-rounded button-flat-action">press me</a>   </li>
                    <li><a href="#" class="button glow button-rounded button-flat-highlight">press me</a></li>
                    <li><a href="#" class="button glow button-rounded button-flat-caution">press me</a>  </li>
                    <li><a href="#" class="button glow button-rounded button-flat-royal">press me</a>  </li>
                </ul>
            </section>

            <pre class="prettyprint linenums">
&lt;a href=&quot;#&quot; class=&quot;button glow button-rounded button-flat&quot;&gt;press me&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;button glow button-rounded button-flat-primary&quot;&gt;press me&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;button glow button-rounded button-flat-action&quot;&gt;press me&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;button glow button-rounded button-flat-highlight&quot;&gt;press me&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;button glow button-rounded button-flat-caution&quot;&gt;press me&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;button glow button-rounded button-flat-royal&quot;&gt;press me&lt;/a&gt;</pre>
        </section>


        <!-- ******************************************************************* -->
        <!-- ROUNDED BUTTONS *************************************************** -->
        <!-- ******************************************************************* -->

        <section id="rounded" class="showcase">
            <hgroup>
                <h3>Rounded Buttons</h3>
            </hgroup>

            <section class="gallery">

                <ul>
                    <li><a href="#" class="button button-rounded">press me</a></li>
                    <li><a href="#" class="button button-rounded button-primary">press me</a>  </li>
                    <li><a href="#" class="button button-rounded button-action">press me</a>   </li>
                    <li><a href="#" class="button button-rounded button-highlight">press me</a></li>
                    <li><a href="#" class="button button-rounded button-caution">press me</a>  </li>
                    <li><a href="#" class="button button-rounded button-royal">press me</a>  </li>
                </ul>
            </section>

            <pre class="prettyprint linenums">
&lt;a href=&quot;#&quot; class=&quot;button button-rounded&quot;&gt;press me&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;button button-rounded button-primary&quot;&gt;press me&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;button button-rounded button-action&quot;&gt;press me&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;button button-rounded button-highlight&quot;&gt;press me&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;button button-rounded button-caution&quot;&gt;press me&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;button button-rounded button-royal&quot;&gt;press me&lt;/a&gt;</pre>
        </section>



        <!-- ******************************************************************* -->
        <!-- PILL BUTTONS *************************************************** -->
        <!-- ******************************************************************* -->

        <section id="pill" class="showcase">
            <hgroup>
                <h3>Pill Buttons</h3>
            </hgroup>

            <section class="gallery">

                <ul>
                    <li><a href="#" class="button button-pill">press me</a></li>
                    <li><a href="#" class="button button-pill button-primary">press me</a>  </li>
                    <li><a href="#" class="button button-pill button-action">press me</a>   </li>
                    <li><a href="#" class="button button-pill button-highlight">press me</a></li>
                    <li><a href="#" class="button button-pill button-caution">press me</a>  </li>
                    <li><a href="#" class="button button-pill button-royal">press me</a>  </li>
                </ul>
            </section>

            <pre class="prettyprint linenums">
&lt;a href=&quot;#&quot; class=&quot;button button-pill&quot;&gt;press me&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;button button-pill button-primary&quot;&gt;press me&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;button button-pill button-action&quot;&gt;press me&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;button button-pill button-highlight&quot;&gt;press me&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;button button-pill button-caution&quot;&gt;press me&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;button button-pill button-royal&quot;&gt;press me&lt;/a&gt;</pre>
        </section>



        <!-- ******************************************************************* -->
        <!-- BORDER BUTTONS *************************************************** -->
        <!-- ******************************************************************* -->

        <section id="border" class="showcase">
            <hgroup>
                <h3>Border Buttons</h3>
            </hgroup>

            <section class="gallery">

                <ul>
                    <li><a href="#" class="button button-border">press me</a></li>
                    <li><a href="#" class="button button-border-primary button-rounded">press me</a>  </li>
                    <li><a href="#" class="button button-border-action button-pill">press me</a>   </li>
                    <li><a href="#" class="button button-border-highlight button-circle">press me</a></li>
                    <li><a href="#" class="button button-border-caution"><i class="fa fa-camera"></i> press me</a>  </li>
                    <li><a href="#" class="button button-border-royal">press me</a>  </li>
                </ul>
            </section>

            <pre class="prettyprint linenums">
&lt;a href=&quot;#&quot; class=&quot;button button-border&quot;&gt;press me&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;button button-border-primary button-rounded&quot;&gt;press me&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;button button-border-action button-pill&quot;&gt;press me&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;button button-border-highlight button-circle&quot;&gt;press me&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;button button-border-caution&quot;&gt;&lt;i class=&quot;fa fa-camera&quot;&gt;&lt;/i&gt; press me&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;button button-border-royal&quot;&gt;press me&lt;/a&gt;</pre>
        </section>



        <!-- ******************************************************************* -->
        <!-- 3D BUTTONS *************************************************** -->
        <!-- ******************************************************************* -->

        <section id="3d" class="showcase">
            <hgroup>
                <h3>3D Buttons</h3>
            </hgroup>

            <section class="gallery">

                <ul>
                    <li><a href="#" class="button button-3d">press me</a></li>
                    <li><a href="#" class="button button-3d-primary button-rounded">press me</a>  </li>
                    <li><a href="#" class="button button-3d-action button-pill">press me</a>   </li>
                    <li><a href="#" class="button button-3d-highlight button-circle">press me</a></li>
                    <li><a href="#" class="button button-3d-caution"><i class="fa fa-camera"></i> press me</a>  </li>
                    <li><a href="#" class="button button-3d-royal">press me</a>  </li>
                </ul>
            </section>

            <pre class="prettyprint linenums">
&lt;a href=&quot;#&quot; class=&quot;button button-3d&quot;&gt;press me&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;button button-3d-primary button-rounded&quot;&gt;press me&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;button button-3d-action button-pill&quot;&gt;press me&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;button button-3d-highlight button-circle&quot;&gt;press me&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;button button-3d-caution&quot;&gt;&lt;i class=&quot;fa fa-camera&quot;&gt;&lt;/i&gt; press me&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;button button-3d-royal&quot;&gt;press me&lt;/a&gt;</pre>
        </section>



        <!-- ******************************************************************* -->
        <!-- SQUARE BUTTONS **************************************************** -->
        <!-- ******************************************************************* -->

        <section id="square" class="showcase">
            <hgroup>
                <h3>Square Buttons</h3>
            </hgroup>

            <section class="gallery">

                <ul>
                    <li><a href="#" class="button">press me</a></li>
                    <li><a href="#" class="button button-primary">press me</a>  </li>
                    <li><a href="#" class="button button-action">press me</a>   </li>
                    <li><a href="#" class="button button-highlight">press me</a></li>
                    <li><a href="#" class="button button-caution">press me</a>  </li>
                    <li><a href="#" class="button button-royal">press me</a>  </li>
                </ul>
            </section>

            <pre class="prettyprint linenums">
&lt;a href=&quot;#&quot; class=&quot;button&quot;&gt;press me&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;button button-primary&quot;&gt;press me&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;button button-action&quot;&gt;press me&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;button button-highlight&quot;&gt;press me&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;button button-caution&quot;&gt;press me&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;button button-royal&quot;&gt;press me&lt;/a&gt;</pre>
        </section>



        <!-- ******************************************************************* -->
        <!-- CIRCLE BUTTONS *************************************************** -->
        <!-- ******************************************************************* -->

        <section id="circle" class="showcase">
            <hgroup>
                <h3>Circle Buttons</h3>
            </hgroup>

            <section class="gallery">

                <ul>
                    <li><a href="#" class="button button-circle">press me</a></li>
                    <li><a href="#" class="button button-circle button-primary">press me</a>  </li>
                    <li><a href="#" class="button button-circle button-action">press me</a>   </li>
                    <li><a href="#" class="button button-circle button-highlight">press me</a></li>
                    <li><a href="#" class="button button-circle button-caution">press me</a>  </li>
                    <li><a href="#" class="button button-circle button-royal">press me</a>  </li>
                </ul>
            </section>

            <pre class="prettyprint linenums">
&lt;a href=&quot;#&quot; class=&quot;button button-circle&quot;&gt;press me&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;button button-circle button-primary&quot;&gt;press me&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;button button-circle button-action&quot;&gt;press me&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;button button-circle button-highlight&quot;&gt;press me&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;button button-circle button-caution&quot;&gt;press me&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;button button-circle button-royal&quot;&gt;press me&lt;/a&gt;</pre>
        </section>



        <!-- ******************************************************************* -->
        <!-- DROPDOWN BUTTONS ************************************************** -->
        <!-- ******************************************************************* -->

        <section id="more" class="showcase">
            <hgroup>
                <h3>Dropdown Buttons <em>(Include jQuery &amp; buttons.js)</em></h3>
            </hgroup>

            <section class="gallery">
                <ul>
                    <li>
                        <span class="button-dropdown" data-buttons="dropdown">
                            <a href="#" class="button button-rounded"> press me <i class="fa fa-caret-down"></i></a>

                            <ul>
                                <li><a href="#">Option 1</a></li>
                                <li><a href="#">Option 2</a></li>
                                <li class="button-dropdown-divider"><a href="#">Option 3</a></li>
                            </ul>
                        </span>
                    </li>
                    <li>
                        <span class="button-dropdown" data-buttons="dropdown">
                            <a href="#" class="button button-rounded button-flat-primary"> press me <i class="fa fa-caret-down"></i></a>

                            <ul class="button-dropdown-menu-below">
                                <li><a href="#">Option 1</a></li>
                                <li><a href="#">Option 2</a></li>
                                <li class="button-dropdown-divider"><a href="#">Option 3</a></li>
                            </ul>
                        </span>
                    </li>
                    <li>
                        <span class="button-dropdown" data-buttons="dropdown">
                            <a href="#" class="button button-rounded button-flat-action"> press me <i class="fa fa-caret-down"></i></a>

                            <ul class="button-dropdown-menu-above">
                                <li><a href="#">Option 1</a></li>
                                <li><a href="#">Option 2</a></li>
                                <li class="button-dropdown-divider"><a href="#">Option 3</a></li>
                            </ul>
                        </span>
                    </li>
                    <li>
                        <span class="button-dropdown" data-buttons="dropdown">
                            <a href="#" class="button button-highlight button-rounded">
                                </i> press me <i class="fa fa-caret-down"></i>
                            </a>

                            <ul>
                                <li><a href="#">Option 1</a></li>
                                <li><a href="#">Option 2</a></li>
                                <li class="button-dropdown-divider"><a href="#">Option 3</a></li>
                            </ul>
                        </span>
                    </li>
                    <li>
                        <span class="button-dropdown" data-buttons="dropdown">
                            <a href="#" class="button button-caution button-pill"> press me <i class="fa fa-caret-down"></i></a>

                            <ul>
                                <li><a href="#">Option 1</a></li>
                                <li><a href="#">Option 2</a></li>
                                <li class="button-dropdown-divider"><a href="#">Option 3</a></li>
                            </ul>
                        </span>
                    </li>
                    <li>
                        <span class="button-dropdown" data-buttons="dropdown">
                            <a href="#" class="button button-royal button-rounded">
                                <i class="fa fa-envelope"></i> press me <i class="fa fa-caret-down"></i>
                            </a>

                            <ul>
                                <li><a href="#">Option 1</a></li>
                                <li><a href="#">Option 2</a></li>
                                <li class="button-dropdown-divider"><a href="#">Option 3</a></li>
                            </ul>
                        </span>
                    </li>
                </ul>
            </section>

            <!-- CODE EXAMPLE -->
            <pre class="prettyprint linenums">&lt;span class=&quot;button-dropdown&quot; data-buttons=&quot;dropdown&quot;&gt;
    &lt;a href=&quot;#&quot; class=&quot;button button-rounded button-flat-primary&quot;&gt; press me &lt;i class=&quot;fa fa-caret-down&quot;&gt;&lt;/i&gt;&lt;/a&gt;
    &lt;ul&gt;
         &lt;li&gt;&lt;a href=&quot;http://airwolfe.com&quot;&gt;AirWolfe.com&lt;/a&gt;&lt;/li&gt;
         &lt;li&gt;&lt;a href=&quot;http://twitter.com&quot;&gt;Twitter&lt;/a&gt;&lt;/li&gt;
         &lt;li class=&quot;button-dropdown-divider&quot;&gt;&lt;a href=&quot;http://google.com&quot;&gt;Google&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
&lt;/span&gt;

&lt;span class=&quot;button-dropdown&quot; data-buttons=&quot;dropdown&quot;&gt;
    &lt;a href=&quot;#&quot; class=&quot;button button-rounded button-flat-primary&quot;&gt; press me &lt;i class=&quot;fa fa-caret-down&quot;&gt;&lt;/i&gt;&lt;/a&gt;

    &lt;!-- Dropdown Below Button --&gt;
    &lt;ul class=&quot;button-dropdown-menu-below&quot;&gt;
         &lt;li&gt;&lt;a href=&quot;http://airwolfe.com&quot;&gt;AirWolfe.com&lt;/a&gt;&lt;/li&gt;
         &lt;li&gt;&lt;a href=&quot;http://twitter.com&quot;&gt;Twitter&lt;/a&gt;&lt;/li&gt;
         &lt;li class=&quot;button-dropdown-divider&quot;&gt;&lt;a href=&quot;http://google.com&quot;&gt;Google&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
&lt;/span&gt;

&lt;span class=&quot;button-dropdown&quot; data-buttons=&quot;dropdown&quot;&gt;
    &lt;a href=&quot;#&quot; class=&quot;button button-rounded button-flat-primary&quot;&gt; press me &lt;i class=&quot;fa fa-caret-down&quot;&gt;&lt;/i&gt;&lt;/a&gt;

    &lt;!-- Dropdown Above Button --&gt;
    &lt;ul class=&quot;button-dropdown-menu-above&quot;&gt;
         &lt;li&gt;&lt;a href=&quot;http://airwolfe.com&quot;&gt;AirWolfe.com&lt;/a&gt;&lt;/li&gt;
         &lt;li&gt;&lt;a href=&quot;http://twitter.com&quot;&gt;Twitter&lt;/a&gt;&lt;/li&gt;
         &lt;li class=&quot;button-dropdown-divider&quot;&gt;&lt;a href=&quot;http://google.com&quot;&gt;Google&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
&lt;/span&gt;
</pre>
        </section>



        <!-- ******************************************************************* -->
        <!-- BLOCK BUTTONS *************************************************** -->
        <!-- ******************************************************************* -->

        <section id="block" class="showcase">
            <hgroup>
                <h3>Block Buttons</h3>
            </hgroup>

            <section class="gallery">
                <a href="#" class="button button-block button-rounded button-large">press me</a>
                <br/>
                <a href="#" class="button button-block button-rounded button-primary button-large">press me</a>
                <br/>
                <a href="#" class="button button-block button-rounded button-action button-large">press me</a>
                <br/>
                <a href="#" class="button button-block button-rounded button-highlight button-large">press me</a>
                <br/>
                <a href="#" class="button button-block button-rounded button-caution button-large">press me</a>
                <br/>
                <a href="#" class="button button-block button-rounded button-royal button-large">press me</a>
            </section>

            <pre class="prettyprint linenums">&lt;a href=&quot;#&quot; class=&quot;button button-block button-rounded button-primary button-large&quot;&gt;press me&lt;/a&gt;</pre>

        </section>



        <!-- ******************************************************************* -->
        <!-- BUTTON SIZES ***************************************************** -->
        <!-- ******************************************************************* -->

        <section class="showcase">
            <hgroup>
                <h3>Button Sizes</h3>
            </hgroup>

            <section class="gallery">
                <ul>
                    <li><a href="#" class="button button-rounded button-flat-primary button-jumbo">press me</a></li>
                    <li><a href="#" class="button button-rounded button-flat-primary button-large">press me</a></li>
                    <li><a href="#" class="button button-rounded button-flat-primary">press me</a></li>
                    <li><a href="#" class="button button-rounded button-flat-primary button-small">press me</a></li>
                    <li><a href="#" class="button button-rounded button-flat-primary button-tiny">press me</a></li>
                </ul>
            </section>

            <pre class="prettyprint linenums">
&lt;a href=&quot;#&quot; class=&quot;button button-rounded button-flat-primary button-large&quot;&gt;press me&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;button button-rounded button-flat-primary&quot;&gt;press me&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;button button-rounded button-flat-primary button-small&quot;&gt;press me&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;button button-rounded button-flat-primary button-tiny&quot;&gt;press me&lt;/a&gt;</pre></section>



        <!-- ******************************************************************* -->
        <!-- WRAPPER BUTTONS *************************************************** -->
        <!-- ******************************************************************* -->

        <section id="wrappers" class="showcase">
            <hgroup>
                <h3>Button Wrappers</h3>
            </hgroup>

            <section class="gallery">

                <ul>
                    <li><span class="button-wrap"><a href="#" class="button button-circle">press me</a></span></li>
                    <li><span class="button-wrap"><a href="#" class="button button-circle button-primary">press me</a></span></li>
                    <li><span class="button-wrap"><a href="#" class="button button-pill ">press me</a></span></li>
                    <li><span class="button-wrap"><a href="#" class="button button-pill button-primary">press me</a></span></li>
                </ul>
            </section>

            <pre class="prettyprint linenums">&lt;span class=&quot;button-wrap&quot;&gt;&lt;a href=&quot;#&quot; class=&quot;button button-circle&quot;&gt;press me&lt;/a&gt;&lt;/span&gt;
&lt;span class=&quot;button-wrap&quot;&gt;&lt;a href=&quot;#&quot; class=&quot;button button-circle button-primary&quot;&gt;press me&lt;/a&gt;&lt;/span&gt;
&lt;span class=&quot;button-wrap&quot;&gt;&lt;a href=&quot;#&quot; class=&quot;button button-pill &quot;&gt;press me&lt;/a&gt;&lt;/span&gt;
&lt;span class=&quot;button-wrap&quot;&gt;&lt;a href=&quot;#&quot; class=&quot;button button-pill button-primary&quot;&gt;press me&lt;/a&gt;&lt;/span&gt;</pre>
        </section>



        <!-- ******************************************************************* -->
        <!-- BUTTON GROUPS ***************************************************** -->
        <!-- ******************************************************************* -->

        <section class="showcase">
            <hgroup>
                <h3>Button Groups</h3>
            </hgroup>

            <section class="gallery">
                <ul>
                    <li>
                        <div class="button-group">
                            <button type="button" class="button">Option 1</button>
                            <button type="button" class="button">Option 2</button>
                            <button type="button" class="button">Option 3</button>
                        </div>
                    </li>
                    <li>
                        <div class="button-group">
                            <button type="button" class="button button-primary">Option 1</button>
                            <button type="button" class="button button-primary">Option 2</button>
                            <button type="button" class="button button-primary">Option 3</button>
                        </div>
                    </li>
                    <li>
                        <div class="button-group">
                            <button type="button" class="active button button-pill">Option 1</button>
                            <button type="button" class="button button-pill">Option 2</button>
                            <button type="button" class="button button-pill">Option 3</button>
                        </div>
                    </li>
                    <li>
                        <div class="button-group">
                            <button type="button" class="button button-pill button-action">Option 1</button>
                            <button type="button" class="button button-pill button-action">Option 2</button>
                            <button type="button" class="button button-pill button-action">Option 3</button>
                        </div>
                    </li>
                    <li>
                        <div class="button-group">
                            <button type="button" class="button button-rounded">Option 1</button>
                            <button type="button" class="button button-rounded">Option 2</button>
                            <button type="button" class="button button-rounded">Option 3</button>
                        </div>
                    </li>
                    <li>
                        <div class="button-group">
                            <button type="button" class="button button-flat-primary">Option 1</button>
                            <button type="button" class="button button-flat-primary">Option 2</button>
                            <button type="button" class="button button-flat-primary">Option 3</button>
                        </div>
                    </li>
                </ul>
            </section>
            <pre class="prettyprint linenums">&lt;div class=&quot;button-group&quot;&gt;
    &lt;button type=&quot;button&quot; class=&quot;button&quot;&gt;Option 1&lt;/button&gt;
    &lt;button type=&quot;button&quot; class=&quot;button&quot;&gt;Option 2&lt;/button&gt;
    &lt;button type=&quot;button&quot; class=&quot;button&quot;&gt;Option 3&lt;/button&gt;
&lt;/div&gt;
&lt;div class=&quot;button-group&quot;&gt;
    &lt;button type=&quot;button&quot; class=&quot;button button-primary&quot;&gt;Option 1&lt;/button&gt;
    &lt;button type=&quot;button&quot; class=&quot;button button-primary&quot;&gt;Option 2&lt;/button&gt;
    &lt;button type=&quot;button&quot; class=&quot;button button-primary&quot;&gt;Option 3&lt;/button&gt;
&lt;/div&gt;
&lt;div class=&quot;button-group&quot;&gt;
    &lt;button type=&quot;button&quot; class=&quot;active button button-pill&quot;&gt;Option 1&lt;/button&gt;
    &lt;button type=&quot;button&quot; class=&quot;button button-pill&quot;&gt;Option 2&lt;/button&gt;
    &lt;button type=&quot;button&quot; class=&quot;button button-pill&quot;&gt;Option 3&lt;/button&gt;
&lt;/div&gt;
&lt;div class=&quot;button-group&quot;&gt;
    &lt;button type=&quot;button&quot; class=&quot;button button-pill button-action&quot;&gt;Option 1&lt;/button&gt;
    &lt;button type=&quot;button&quot; class=&quot;button button-pill button-action&quot;&gt;Option 2&lt;/button&gt;
    &lt;button type=&quot;button&quot; class=&quot;button button-pill button-action&quot;&gt;Option 3&lt;/button&gt;
&lt;/div&gt;
&lt;div class=&quot;button-group&quot;&gt;
    &lt;button type=&quot;button&quot; class=&quot;button button-rounded&quot;&gt;Option 1&lt;/button&gt;
    &lt;button type=&quot;button&quot; class=&quot;button button-rounded&quot;&gt;Option 2&lt;/button&gt;
    &lt;button type=&quot;button&quot; class=&quot;button button-rounded&quot;&gt;Option 3&lt;/button&gt;
&lt;/div&gt;
&lt;div class=&quot;button-group&quot;&gt;
    &lt;button type=&quot;button&quot; class=&quot;button button-flat-primary&quot;&gt;Option 1&lt;/button&gt;
    &lt;button type=&quot;button&quot; class=&quot;button button-flat-primary&quot;&gt;Option 2&lt;/button&gt;
    &lt;button type=&quot;button&quot; class=&quot;button button-flat-primary&quot;&gt;Option 3&lt;/button&gt;
&lt;/div&gt;</pre>
        </section>

        <!-- ******************************************************************* -->
        <!-- FORMS & ANCHORS *************************************************** -->
        <!-- ******************************************************************* -->

        <section id="form" class="showcase">
            <hgroup>
                <h3>Form Elements Work Too</h3>
            </hgroup>

            <section class="gallery">

                <ul>
                    <li><input type="submit" value="press me" class="button button-pill button-primary"/></li>
                    <li><button class="button button-pill button-primary">press me</button>  </li>

                    <!-- DISABLED BUTTONS -->
                    <li><input  disabled type="submit"  value="press me" class="button button-pill button-primary"/></li>
                    <li><button disabled class="button  button-pill button-primary">press me</button>  </li>
                    <li><button disabled class="button button-pill button-flat-primary">press me</button>  </li>
                    <li><a href="#" class="button disabled button-pill button-primary ">press me</a></li>
                </ul>
            </section>

            <pre class="prettyprint linenums">
&lt;input type=&quot;submit&quot; value=&quot;press me&quot; class=&quot;button button-pill button-primary&quot;/&gt;
&lt;button class=&quot;button button-pill button-primary&quot;&gt;press me&lt;/button&gt;

&lt;!-- DISABLED BUTTONS --&gt;
&lt;input  disabled type=&quot;submit&quot;  value=&quot;press me&quot; class=&quot;button button-pill button-primary&quot;/&gt;
&lt;button disabled class=&quot;button  button-pill button-primary&quot;&gt;press me&lt;/button&gt;
&lt;a href=&quot;#&quot; class=&quot;button disabled button-pill button-primary&quot;&gt;press me&lt;/a&gt;</pre>
        </section>

    </section>


    <article id="setup">
        <section class="instructions">
            <h2>Getting Started</h2>
            <section class="setup">
                <h3><i class="fa fa-code"></i> Setup Buttons</h2>
                <ol class="steps">
                    <li>
                        <a class="button button-rounded button-flat-primary button-tiny" href="https://github.com/alexwolfe/Buttons/raw/gh-pages/Buttons.zip"><i class="fa fa-download"></i> Download Buttons</a> and add files to your website.
                    </li>
                    <li> Add css in the head of your webpage.
<pre class="prettyprint linenums">&lt;link href=&quot;//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css&quot; rel=&quot;stylesheet&quot;&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;css/buttons.css&quot;&gt;

&lt;script src=&quot;http://code.jquery.com/jquery-1.10.1.min.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;js/buttons.js&quot;&gt;&lt;/script&gt;</pre>

                    <em>* You only need the font-awesome css if you're using icons</em><br/>
                    <em>* You only need jquery &amp; buttons.js if you're using dropdown buttons</em>
                    </li>
                    <li>Create buttons in your html.</li>
                </ol>
            </section>

            <section class="customize">
                <h3><i class="fa fa-github"></i> Customize Buttons</h2>
                <ol class="steps">
                    <li><a class="button button-rounded button-flat-action button-tiny" href="https://github.com/alexwolfe/Buttons/"><i class="fa fa-github"></i> Fork or Download</a> the Buttons project on github.
                    </li>
                    <li>Make sure you have <a target="_blank" href="http://sass-lang.com/download.html">Sass</a> and <a target="_blank" href="http://compass-style.org/install/">Compass</a> installed.</li>
                    <li>Edit the _options.scss with your own custom values</li>
                    <li>In the root of the Buttons directory type <strong>compass watch</strong> on the command line.</li>
                    <li>The buttons.css file should now be updated</li>
                </ol>
            </section>
            <div class="clear"></div>
        </section>
    </article>

    <footer>

        <p>Created at by <a target="_blank" href="https://twitter.com/alexwolfe">@alexwolfe</a> at <a target="_blank" href="https://twitter.com/AdRoll">@adroll</a> </p>

        <p>Licensed under <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a></p>
        <p>
    </footer>

    <script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js?skin=sons-of-obsidian"></script>
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script type="text/javascript" src="js/vendor/scrollto.js"></script>
    <script type="text/javascript" src="js/main.js"></script>
    <script type="text/javascript" src="js/buttons.js"></script>

    <script>
      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
      })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

      ga('create', 'UA-41954774-1', 'alexwolfe.github.io');
      ga('send', 'pageview');

    </script>
</body>
</html>
